<template>
  <div>
    <a-empty :image-style="{ height: '60px' }" v-if="emptyShow && resourcesTree.menus.length === 0 && resourcesTree.mix.length === 0">
      <span slot="description"> 无独立权限 <a @click="addPermission" v-has-permission="actionName">去添加</a> </span>
    </a-empty>
    <description-list title="" size="small" :column="1">
      <description-list-item :label="'独立菜单( ' + resourcesTree.menus.length + ' )'" v-if="resourcesTree.menus.length > 0">
        <a-tag color="orange" v-for="menu in resourcesTree.menus" :key="menu.id">{{ menu.label }}</a-tag>
      </description-list-item>
    </description-list>
    <description-list title="" size="small" v-if="resourcesTree.mix.length > 0" :column="2">
      <!-- :label="mix.label + '(' + mix.btns.length + ')'" -->
      <description-list-item v-for="mix in resourcesTree.mix" :label="mix.label" :key="mix.id">
        <a-tag color="cyan" v-for="btn in mix.btns" :key="btn.id">{{ btn.label }}</a-tag>
      </description-list-item>
    </description-list>
  </div>
</template>

<script>
import { DescriptionList } from '@/components'
const DescriptionListItem = DescriptionList.Item
// 资源面板 - 用于展示用户资源
export default {
  name: 'ResourcePanel',
  components: { DescriptionList, DescriptionListItem },
  props: {
    resourceIds: {
      type: Array,
      default: function () {
        return []
      }
    },
    emptyShow: {
      type: Boolean,
      default: true
    },
    actionName: {
      type: String,
      default: ''
    }
  },
  computed: {
    resourcesTree () {
      const that = this
      const menus = []
      const mix = []
      const btns = []
      const cache = {}
      const btnsCache = {}
      if (this.resourceIds && this.resourceIds.length > 0) {
        this.$store.getters.allResources.forEach(item => {
          if (that.resourceIds.indexOf(item.id) > -1) {
            const copyItem = Object.assign({}, item)
            cache[item.id] = copyItem
            if (item.category === 2 && typeof btnsCache[item.id] === 'undefined') {
              btnsCache[item.id] = copyItem
              btns.push(copyItem)
            }
          }
        })

        btns.some(item => {
          if (cache[item.parentId]) {
            if (typeof cache[item.parentId].btns === 'undefined') {
              cache[item.parentId].btns = []
            }
            cache[item.parentId].btns.push(item)
            delete cache[item.id]
          }
        })
        for (const key in cache) {
          const item = cache[key]
          if (item.btns) {
            mix.push(item)
          } else {
            menus.push(item)
          }
        }
      }

      return { menus: menus, mix: mix }
    }
  },
  created () {
    console.log('resourceIds', this.resourceIds)
  },
  methods: {
    addPermission () {
      this.$emit('add-action')
    }
  }
}
</script>

<style scoped>

</style>
